<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <title>Nerbii</title>
    <link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />

	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.mobile-1.4.1.js"></script>
    <script src="js/app.js"></script>
    <script src="js/foursquare.js"></script>
	

  <!-- Building blocksdwdscwecdw -->
  <!-- --------------- -->
  <link rel="stylesheet" href="style/action_menu.css">
  <link rel="stylesheet" href="style/buttons.css">
  <link rel="stylesheet" href="style/confirm.css">
  <link rel="stylesheet" href="style/edit_mode.css">
  <link rel="stylesheet" href="style/headers.css">
  <link rel="stylesheet" href="style/input_areas.css">
  <link rel="stylesheet" href="style/status.css">
  <link rel="stylesheet" href="style/switches.css">
  <link rel="stylesheet" href="style/drawer.css">
  <link rel="stylesheet" href="style/lists.css">
  <link rel="stylesheet" href="style/progress_activity.css">
  <link rel="stylesheet" href="style/scrolling.css">
  <link rel="stylesheet" href="style/seekbars.css">
  <link rel="stylesheet" href="style/tabs.css">
  <link rel="stylesheet" href="style/toolbars.css">

  <!-- Icons -->
  <link rel="stylesheet" href="icons/styles/action_icons.css">
  <link rel="stylesheet" href="icons/styles/media_icons.css">
  <link rel="stylesheet" href="icons/styles/comms_icons.css">
  <link rel="stylesheet" href="icons/styles/settings_icons.css">

  <!-- Transitions -->
  <link rel="stylesheet" href="transitions.css">
  
  <!-- Util CSS: some extra tricks -->
  <link rel="stylesheet" href="util.css">
  <link rel="stylesheet" href="fonts.css">

  <!-- Additional markup to make Building Blocks kind of cross browser -->
  <link rel="stylesheet" href="cross_browser.css">

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiyHoBSIvIBdrxXcttmxgdMywYeB_Lzao&sensor=true">
    </script>
	<script type="text/javascript">

	  
	var map;
	var Lat;
	var Long;
	
	function initialize() {
			var mapOptions = {
			  center: new google.maps.LatLng(50.7274839, 3.1957176),
			  zoom: 8,
				panControl: false,
				zoomControl: false,
				mapTypeControl: false,
				scaleControl: false,
				streetViewControl: false,
				overviewMapControl: false 
			};
	  map = new google.maps.Map(document.getElementById('map-canvas'),
		  mapOptions);

	  // Try HTML5 geolocation
	  if(navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
		  var pos = new google.maps.LatLng(position.coords.latitude,
										   position.coords.longitude);
		
		
				Lat = position.coords.latitude;
				Long = position.coords.longitude;
				
				
				GetPlaces(Lat,Long);

		var infowindow = new google.maps.InfoWindow({
			map: map,
			position: pos,
			content: 'You are here.'
		  });

		  map.setCenter(pos);
		}, function() {
		  handleNoGeolocation(true);
		});
	  } else {
		// Browser doesn't support Geolocation
		handleNoGeolocation(false);
	  }
	}

	function handleNoGeolocation(errorFlag) {
	  if (errorFlag) {
		var content = 'Error: The Geolocation service failed.';
	  } else {
		var content = 'Error: Your browser doesn\'t support geolocation.';
	  }

	  var options = {
		map: map,
		position: new google.maps.LatLng(60, 105),
		content: content
	  };

	  var infowindow = new google.maps.InfoWindow(options);
	  map.setCenter(options.position);
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	$( document ).ready(function() {
    console.log( "ready!" );
	
	});
	

  </script>	
	
  </head>
  <body>
			<section data-type="sidebar">
			  <header>
				<menu type="toolbar">
				  <a href="#content"><span class="icon icon-add">add</span></a>
				</menu>
				<h1>Title <em>(9)</em></h1>
			  </header>
			  <nav>
				<ul>
				  <li><a href="#content">label</a></li>
				  <li><a href="#content">label</a></li>
				  <li><a href="#content">label</a></li>
				  <li><a href="#content">label</a></li>
				</ul>
				<h2>Subtitle</h2>
				<ul>
				  <li><a href="#content">label</a></li>
				  <li><a href="#content">label</a></li>
				  <li><a href="#content">label larger label than the </a></li>
				  <li><a href="#content">label</a></li>
				</ul>
			  </nav>
			</section>
			
			
			<section id="drawer" role="region">
			  <header>
				<a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
				<a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
				<h1>Nearbii</h1>
				
			  </header>
			  <div role="main">
					<div class="top-content">

						<form role="search">
						  <p>
							<input type="text" placeholder="Where are you ?" required="">
							<button type="reset">Clear</button>
						  </p>
						</form>
				   </div>
				

								
			   
					<div class="content">
								<div id="map-canvas"></div>
								<div id="ajax-panel"></div>
				   </div>
			  </div>
			</section>
  </body>
</html>